import { memo, useEffect } from 'react'

import { getTopBannerAction } from '../../store/actionCreators'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { Carousel } from 'antd';

import { BannerWrapper, BannerRight, BannerLeft } from './style'

function TopBanner() {
  const { topBanners } = useSelector(state => ({
    topBanners: state.getIn(["recommend", "topBanners"])
  }), shallowEqual)

  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getTopBannerAction())
  }, [dispatch])

  return (
    <BannerWrapper>
      <div className="banner wrap-v2">
        <BannerLeft>
          <Carousel effect="fade">
            {
              topBanners.map((item, index) => {
                return (
                  <div className="banner-item" key={item.imageUrl}>
                     <img className="image" src={item.imageUrl} alt={item.typeTitle} />
                  </div>
                )
              })
            }
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3>3</h3>
            </div>
            <div>
              <h3>4</h3>
            </div>
          </Carousel>
        </BannerLeft>
        <BannerRight></BannerRight>
      </div>
    </BannerWrapper>
  )
}

export default memo(TopBanner);